<!--

                   _ooOoo_
                  o8888888o
                  88" . "88
                  (| -_- |)
                  O\  =  /O
               ____/`---'\____
             .'  \\|     |//  `.
            /  \\|||  :  |||//  \
           /  _||||| -:- |||||-  \
           |   | \\\  -  /// |   |
           | \_|  ''\---/''  |   |
           \  .-\__  `-`  ___/-. /
         ___`. .'  /--.--\  `. . __
      ."" '<  `.___\_<|>_/___.'  >'"".
     | | :  `- \`.;`\ _ /`;.`/ - ` : | |
     \  \ `-.   \_ __\ /__ _/   .-` /  /
======`-.____`-.___\_____/___.-`____.-'======
                   `=---='
^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
         佛祖保佑       永无BUG
 ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  author: tangcheng_cd
  create by: 2019/8/27
  descr: 带按钮的输入框
-->
<template>
    <div class="v-input-button">
        <el-button @click="$emit('btnClick')" :type="btnType">{{btnText}}</el-button>
        <el-input v-model="iptValue" :readonly="readonly"/>
    </div>
</template>

<script type="text/ecmascript-6">
    export default {
        name: 'v-input-button',
        model: {
            prop: 'value',
            event: 'change'
        },
        props: {
            value: {
                type: String,
                default: null
            },
            readonly: {
                type: Boolean,
                default: true
            },
            btnText: { // 按钮文字
                type: String,
                default: '选择'
            },
            btnType: {
                type: String,
                default: null
            }
        },
        data () {
            return {
                iptValue: ''
            }
        },
        watch: {
            value (newValue, oldValue) {
                this.setInputValue(newValue)
            }
        },
        methods: {
            setInputValue (val) {
                this.iptValue = val
                this.$emit('change', val)
            }
        },
        created () {
            this.iptValue = this.value
        }
    }
</script>

<style lang="stylus" rel="stylesheet/stylus">
.v-input-button
    .el-input
        overflow hidden
        display block
        width auto
    .el-button
        float right
        height 30px
</style>
